<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:rsf="http://ponder.org.uk/rsf"
	xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- These need to be pulled in all the time and the rsf:id does this. -->
<script type="text/javascript"
	src="/library/webjars/jquery/1.12.4/jquery.min.js"
	rsf:id="scr=contribute-script"></script>
<script type="text/javascript"
	src="/library/webjars/jquery-ui/1.12.1/jquery-ui.min.js"
	rsf:id="scr=contribute-script"></script>
<link
	href="/library/webjars/jquery-ui/1.12.1/jquery-ui.min.css"
	rel="stylesheet" type="text/css" rsf:id="scr=contribute-style" />
<script type="text/javascript"
	src="/library/webjars/jquery-migrate/1.4.1/jquery-migrate.min.js"
	rsf:id="scr=contribute-script"></script>
<script type="text/javascript"
	src="/library/webjars/momentjs/2.29.4/min/moment-with-locales.min.js"
	rsf:id="scr=contribute-script"></script>
<script type="text/javascript"
	src="/library/js/lang-datepicker/lang-datepicker.js"
	rsf:id="scr=contribute-script"></script>
<script type="text/javascript" rsf:id="scr=contribute-script">
	// Simple wrapper to make it easy to call from RSF, now using the
	// modern SakaiDateTimePicker class instead of the old jQuery plugin.
	const rsfDatePicker = function(id, hidden, time) {
		// Preserve raw ids for getElementById/ashidden; escape only for selector usage.
		const rawId = id;
		const rawHidden = hidden;
		const selector = "#" + rawId.replace(/:/g, "\\:");

		// Initialize on DOM ready without jQuery
		document.addEventListener('DOMContentLoaded', () => {
			let initialVal = document.getElementById(rawHidden) ? document.getElementById(rawHidden).value : "";
			if (initialVal) {
				// Check for ISO format with timezone. Could be more compact but ampersands don't work in RSF templates AFAIK.
				const hasT = initialVal.indexOf('T') !== -1;
				const hasPlus = (initialVal.lastIndexOf('+') == initialVal.length -3);
				const hasMinus = (initialVal.lastIndexOf('-') == initialVal.length -3);

				if (hasT) {
					if (hasPlus || hasMinus) {
						initialVal = initialVal + ':00';
					}
				}
			}

			new SakaiDateTimePicker({
				input: selector,
				useTime: time,
				val: initialVal,
				ashidden: { iso8601: rawHidden }
			});
		});
	};
	// Ensure global access for the inline init script
	window.rsfDatePicker = rsfDatePicker;
</script>
</head>

<body>

	<!-- We have 2 HTML tags, one that is displayed to the user and one that stores our ISO8601 formatted date.
     JavaScript is used to copy that updates between the two. This means if JS isn't enabled this won't work.
  -->
	<!-- The root of the component -->
	<div rsf:id="sakai-date-field-input:">
		<input rsf:id="iso8601" type="hidden" id="dateStart" name="dateStart"
			value="MM/DD/YYYY" size="15" maxlength="15" /> <input
			rsf:id="display" type="text" id="startDate" name="startDate" />
		<script rsf:id="init-date">
			rsfDatePicker(id, hidden, time);
		</script>
	</div>

</body>
</html>
